<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>{{ title }}</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="close"
                >关闭
                </el-button>
            </div>
            <div>
                <el-form ref="searchForm" :inline="true" label-suffix="" label-width="100px"
                         label-position="left" size="small">
                    <el-row>
                        <el-col>
                            <el-form-item label="请选择日期">
                                <el-date-picker
                                    v-model="dateRange"
                                    value-format="yyyy-MM-dd"
                                    unlink-panels
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="this.CONST.analysis_date_options">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" v-on:click="getData">确定</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="exportExcel">导出</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-table
                id="compareTable"
                :data="tableData"
                v-fixed-header="{startFixed: 0}"
                border
                size="small"
                :span-method="objectSpanMethod"
                :row-class-name="tableRowClassName"
                header-cell-class-name="tableHeaderStyle">
                <el-table-column
                    :prop=item.prop :label=item.name :width=item.width :type=item.type v-for="item in header"
                    :key="item.id">
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import {getDpCompareDataByShop} from "@/api/api";
import DpCycAnalysis from "@/component/analysis/DpCpcAnalysis";
import DpFeedbackAnalysis from "@/component/analysis/DpFeedbackAnalysis";
import DpDailyAnalysis from "@/component/analysis/DpDailyAnalysis";
import DpShopHistory from "@/component/DpShopHistory";

export default {
    name: "DpShopAnalysis",
    components: {DpCycAnalysis, DpFeedbackAnalysis, DpDailyAnalysis, DpShopHistory},
    data() {
        return {
            shopIds: '',
            // 时间范围
            dateRange: [],

            // 表头
            header: [],
            // 数据
            tableData: [],
            // 网页名称
            title: '不同门店同一日期数据对比'
        }
    },
    methods: {
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            if (rowIndex <= 4) {
                return "basic";
            } else if (rowIndex <= 8) {
                return "feedback";
            } else if (rowIndex <= 16) {
                return "daily";
            } else if (rowIndex <= 24) {
                return "view";
            } else if (rowIndex <= 31) {
                return "consume";
            } else if (rowIndex <= 39) {
                return "revenue";
            } else if (rowIndex <= 51) {
                return "cpc";
            } else {
                return "";
            }
        },
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
        },
        exportExcel: function () {
            this.GLOBAL.exportExcel('#compareTable', this.title + '.xlsx');
        },
        // 获取门店数据
        getData: function () {
            let startDate = this.dateRange[0];
            let endDate = this.dateRange[1];
            getDpCompareDataByShop({
                "shopIds": this.shopIds,
                "startDate": startDate,
                "endDate": endDate
            }).then(data => {
                this.header = data.body.header;
                this.tableData = data.body.data;
                this.title = data.body.title;
                document.title = this.title;
            })
        },
        close() {
            window.open('', '_self');
            window.close();
        },
    },
    created() {
        this.shopIds = this.$route.query.shopIds;
        this.startDate = this.$route.query.startDate;
        this.endDate = this.$route.query.endDate;
        this.dateRange = [this.startDate, this.endDate]
        this.getData();
    },
}
</script>

<style>
.el-table .basic {
    background: #f0f9eb;
}

.el-table .feedback {
    background: #9bb2d4;
}

.el-table .daily {
    background: #f1c196;
}

.el-table .view {
    background: #d3d595;
}

.el-table .revenue {
    background: lightskyblue;
}

.el-table .consume {
    background: #a5ecc6;
}

.el-table .cpc {
}
</style>
